import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

// 导入ElementUI
import ElementUI from 'element-ui';
// 导入ElementUI的样式
import 'element-ui/lib/theme-chalk/index.css';
// 注册ElementUI
Vue.use(ElementUI);

// 全局白名单(不需要身份验证)
const whiteList = ['/login', '/reg']
// 添加路由导航, 身份验证
router.beforeEach((to, form, next) => {
  // 获取vuex中存储的token
  const token = store.state.token
  // 1. 判断是否存储在token
  if (token) {
    // 已登录
    console.log('已登录');
    // 2. 判断是否去登录页面
    if (to.path === '/login') {
      // 要去登录页面
      console.log('要求登录页面, 回到首页');
      // 回到首页
      next('/')
    } else {
      // 不去登录页面
      console.log('不去登录页面, 放行');
      // 放行
      next()
    }
  } else {
    // 未登录
    console.log('未登录');
    // 3. 判断是否去白名单
    if (whiteList.includes(to.path)) {
      // 要去白名单
      console.log('要去白名单, 放行');
      // 放行
      next()
    } else {
      // 不去白名单
      console.log('不去白名单, 去登录页');
      // 跳转到登录页
      next('/login')
    }
  }
})

// 导入axios
import axios from 'axios'
// 设置基地址
axios.defaults.baseURL = 'http://big-event-vue-api-t.itheima.net'

// 添加请求拦截器, 给每个有token的axios请求添加请求头的Authorization
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // 获取vuex中存储的token
  const token = store.state.token
  // 判断token是否存在
  if (token) {
    config.headers.Authorization = token
  }
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 把axios挂载到Vue构造函数的原型对象上
Vue.prototype.$axios = axios

// 导入全局样式
import '@/assets/global.less'

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
